<template>
    <view class="home-page">
        <!-- 用户与宝宝信息卡片 -->
        <view class="user-card">
            <view class="user-info">
                <image src="/static/images/baby.png" alt="宝宝头像" class="baby-avatar" mode="aspectFill"></image>
                <view>
                    <text class="user-name">{{ babyName }} · {{ babyAgeText }}</text>
                    <text class="user-status">{{ userName }}，产后{{ postpartumDays }}天</text>
                </view>
            </view>
            
            <view class="milestone-tracking">
                <view class="flex justify-between items-center mb-1">
                    <text class="text-sm font-medium text-gray-700">发育里程碑进度</text>
                </view>
                
                <view class="progress-container">
                    <view class="progress-bar" :style="{ width: milestoneProgress + '%' }"></view>
                </view>
                
                <view class="text-xs text-gray-500 mt-1">
                    <text>即将学会：{{ nextMilestone }}</text>
                </view>
            </view>
        </view>

        <!-- 健康行为与饮食指导 -->
        <view class="health-guidance-section mb-3">
            <SectionTitle title="健康指导" icon="heart-beat" />
            
            <view class="guidance-cards">
                <view class="guidance-card">
                    <view class="guidance-icon bg-green">
                        <u-icon name="knife-fork" color="#FFFFFF" size="24"></u-icon>
                    </view>
                    <text class="guidance-title">产后饮食指导</text>
                    <text class="guidance-desc">哺乳期营养补充建议</text>
                </view>
                
                <view class="guidance-card">
                    <view class="guidance-icon bg-blue">
                        <u-icon name="man-add" color="#FFFFFF" size="24"></u-icon>
                    </view>
                    <text class="guidance-title">产后恢复建议</text>
                    <text class="guidance-desc">盆底肌修复与体态调整</text>
                </view>
            </view>
        </view>

        <!-- 产后/宝宝核心功能 -->
        <view class="core-functions mb-3">
            <SectionTitle title="宝宝护理" icon="magic" />
            
            <FunctionGrid :columns="5">
                <FunctionItem 
                    v-for="(item, index) in functionItems" 
                    :key="index"
                    :icon="item.icon"
                    :name="item.name"
                    @click="item.action"
                />
            </FunctionGrid>
        </view>

        <!-- 产后恢复数据 -->
        <ContentCard 
            title="妈妈恢复状况" 
            icon="heart" 
            more-text="详情"
            @more-click="postpartumNav.toRecoveryDetail"
        >
            <view class="space-y-3">
                <DataItem 
                    icon="scale" 
                    label="体重恢复" 
                    value="-5.2" 
                    unit="kg" 
                    color="pink"
                />
                
                <DataItem 
                    icon="walking" 
                    label="运动天数" 
                    value="18" 
                    unit="天" 
                    color="blue"
                />
                
                <DataItem 
                    icon="bed" 
                    label="平均睡眠" 
                    value="5.3" 
                    unit="小时" 
                    color="green"
                />
            </view>
        </ContentCard>
        
        <!-- 宝宝成长数据 -->
        <ContentCard 
            title="宝宝成长数据" 
            icon="child" 
            more-text="查看趋势"
            @more-click="postpartumNav.toGrowthTrend"
        >
            <view class="flex justify-between mb-3">
                <view class="flex flex-1 flex-col items-center">
                    <text class="text-xl font-bold text-pink-500">{{ babyWeight }}</text>
                    <text class="text-xs text-gray-500">体重(kg)</text>
                </view>
                
                <view class="flex flex-1 flex-col items-center">
                    <text class="text-xl font-bold text-blue-500">{{ babyHeight }}</text>
                    <text class="text-xs text-gray-500">身高(cm)</text>
                </view>
                
                <view class="flex flex-1 flex-col items-center">
                    <text class="text-xl font-bold text-green-500">{{ babyHeadCircumference }}</text>
                    <text class="text-xs text-gray-500">头围(cm)</text>
                </view>
            </view>
            
            <view class="growth-chart">
                <text class="chart-placeholder">宝宝生长曲线趋势图</text>
            </view>
        </ContentCard>
        
        <!-- 今日喂养记录 -->
        <ContentCard 
            title="今日喂养记录" 
            icon="baby-carriage" 
            more-text="查看全部"
            @more-click="postpartumNav.toAllFeedings"
        >
            <view class="flex justify-between mb-3">
                <view class="text-sm">
                    已记录 <text class="font-semibold text-pink-500">{{ feedingCount }}</text> 次喂养
                </view>
                <view class="text-sm text-gray-500">目标: 8-10次/天</view>
            </view>
            
            <view class="space-y-3">
                <view class="feeding-item" v-for="(item, index) in feedingRecords" :key="index">
                    <view class="feeding-icon" :class="item.type === '母乳喂养' ? 'bg-red-100' : 'bg-blue-100'">
                        <u-icon name="baby-carriage" :color="item.type === '母乳喂养' ? '#F87171' : '#60A5FA'" size="20"></u-icon>
                    </view>
                    
                    <view class="feeding-content">
                        <view class="flex justify-between">
                            <view>
                                <text class="text-sm font-medium">{{ item.type }}</text>
                                <text class="text-xs text-gray-500">{{ item.desc }}</text>
                            </view>
                            <text class="text-xs text-gray-400">{{ item.time }}</text>
                        </view>
                    </view>
                </view>
            </view>
            
            <button class="custom-button" @tap="postpartumNav.toAddFeeding">
                <u-icon name="plus" color="#FF9FB5" size="14"></u-icon>
                <text>添加喂养记录</text>
            </button>
        </ContentCard>
        
        <!-- 产后知识推荐 -->
        <ContentCard 
            title="产后与育儿知识" 
            icon="lightbulb" 
            more-text="更多"
            @more-click="postpartumNav.toKnowledge"
        >
            <view class="article-list">
                <view class="article-item" v-for="(article, index) in articles" :key="index" @tap="viewArticleDetail(article.id)">
                    <image :src="article.image" class="article-image" mode="aspectFill"></image>
                    <view class="article-content">
                        <text class="article-title">{{ article.title }}</text>
                        <view class="article-meta">
                            <view class="article-tag">{{ article.tag }}</view>
                            <view class="article-views">{{ article.views }}阅读</view>
                        </view>
                    </view>
                </view>
            </view>
        </ContentCard>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { getUserData } from '@/services/userDataService';
import { calculateDaysDiff, getBabyAgeText } from '@/utils/dateUtils';
import { postpartumNavigation as postpartumNav } from '@/utils/navigationUtils';
import ContentCard from '@/components/home/ContentCard.vue';
import FunctionItem from '@/components/home/FunctionItem.vue';
import FunctionGrid from '@/components/home/FunctionGrid.vue';
import SectionTitle from '@/components/home/SectionTitle.vue';
import DataItem from '@/components/home/DataItem.vue';

// 获取用户数据
const userData = getUserData();

// 婴儿喂养记录
const feedingRecords = ref([
    {
        type: '母乳喂养',
        desc: '25分钟，左右两侧',
        time: '12:30'
    },
    {
        type: '配方奶',
        desc: '120ml，完全喝完',
        time: '09:15'
    }
]);

// 文章列表
const articles = ref([
    {
        id: 1,
        title: '3-4个月宝宝的发育关键点，这些能力要重点培养',
        tag: '育儿技巧',
        image: '/static/images/article1.jpg',
        views: '1.4万'
    },
    {
        id: 2,
        title: '产后三个月腹部恢复计划，每天十分钟见效快',
        tag: '产后恢复',
        image: '/static/images/article2.jpg',
        views: '8756'
    }
]);

// 功能项列表
const functionItems = [
    { icon: 'line-chart', name: '成长曲线', action: postpartumNav.toGrowthCurve },
    { icon: 'knife-fork', name: '喂养记录', action: postpartumNav.toFeeding },
    { icon: 'baby', name: '发育里程碑', action: postpartumNav.toMilestones },
    { icon: 'first-aid-alt', name: '新生儿护理', action: postpartumNav.toNewbornCare },
    { icon: 'heart-broken', name: '产后抑郁预警', action: postpartumNav.toPostpartumDepression },
    { icon: 'file-medical', name: '健康记录', action: postpartumNav.toHealthRecord },
    { icon: 'spa', name: '产后恢复', action: postpartumNav.toPostpartumRecovery },
    { icon: 'baby-carriage', name: '婴儿喂养指南', action: postpartumNav.toFeedingGuide },
    { icon: 'moon', name: '睡眠解决', action: postpartumNav.toSleepSolutions },
    { icon: 'hands-helping', name: '母婴互动指南', action: postpartumNav.toInteractionGuide }
];

// 计算属性
const userName = computed(() => userData.userName || '刘小红');
const babyName = computed(() => userData.babyName || '小明');
const postpartumDays = computed(() => calculateDaysDiff(userData.birthDate || ''));
const babyAgeText = computed(() => getBabyAgeText(userData.birthDate || ''));
const milestoneProgress = computed(() => 25); // 固定值
const nextMilestone = computed(() => '抬头和支撑上身'); // 固定值
const babyWeight = computed(() => '6.1'); // 固定值
const babyHeight = computed(() => '61.5'); // 固定值
const babyHeadCircumference = computed(() => '41.2'); // 固定值
const feedingCount = computed(() => feedingRecords.value.length);

// 查看文章详情
const viewArticleDetail = (id: number) => {
    uni.navigateTo({ url: `/pages/knowledge/detail?id=${id}` });
};

// 生命周期钩子
onMounted(() => {
    // 初始化逻辑
});
</script>

<style lang="scss" scoped>
@import '@/styles/home.scss';

/* 用户信息卡片特定样式 */
.baby-avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 20rpx;
    border: 4rpx solid #ffd6e0;
}

.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
}

.user-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    display: block;
}

.user-status {
    font-size: 24rpx;
    color: #666;
    display: block;
}

.milestone-tracking {
    background-color: #fff8f9;
    border-radius: 16rpx;
    padding: 20rpx;
}

/* 健康指导部分特定样式 */
.guidance-cards {
    display: flex;
    justify-content: space-between;
    gap: 20rpx;
}

.guidance-card {
    flex: 1;
    background-color: #ffffff;
    border-radius: 24rpx;
    padding: 40rpx 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.guidance-icon {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20rpx;
}

.bg-green {
    background-color: #10B981;
}

.bg-blue {
    background-color: #60A5FA;
}

.guidance-title {
    font-size: 30rpx;
    color: #333333;
    font-weight: 500;
    margin-bottom: 10rpx;
    display: block;
}

.guidance-desc {
    font-size: 26rpx;
    color: #666666;
    display: block;
}

/* 喂养记录特定样式 */
.feeding-item {
    display: flex;
    align-items: center;
}

.feeding-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20rpx;
}

.feeding-content {
    flex: 1;
}

/* 宝宝成长图表 */
.growth-chart {
    width: 100%;
    height: 200rpx;
    background-color: #f9f9f9;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-placeholder {
    font-size: 24rpx;
    color: #999;
}
</style> 